<template>
    <div align="center" >
        <el-card class="box-card-1">
            <div slot="header" class="clearfix">
                <span> <h5> 公告修改</h5></span>
                <el-button type="text" style="float: right; padding: 3px 0" @click="editNoticeDialog">修改</el-button>
            </div>
            <div>
                <el-form
                        class="editform"
                        ref="ruleForm"
                        label-position="left"
                        label-width="80px"
                        v-model="updateDateOne"
                >

                    <el-form-item label="公告标题" prop="noticeName">
                        <el-input v-model="updateDateOne.noticeName" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="公告简介" prop="noticeIntro">
                        <el-input v-model="updateDateOne.noticeIntro" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="发布时间" prop="releaseTime">
                        <!--<el-input v-model="addData.releaseTime" placeholder="请输入"></el-input>-->
                        <div class="block" align="left">
                            <span class="demonstration"></span>
                            <el-date-picker
                                    v-model="updateDateOne.releaseTime"
                                    align="left"
                                    type="date"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <!--<el-form-item label="发布人" prop="email">-->
                    <!--<el-input v-model="addData.createPerson" placeholder="请输入"></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="公告内容" prop="noticeContent">-->
                    <div>
                        <div ><h4>公告内容</h4></div>
                        <div id="toolbar-container"></div>
                        <!--编辑器容器-->
                        <div id="editor">
                            <p>This is the initial editor content.</p>
                        </div>
                        <!--&lt;!&ndash;<div v-html="addData.noticeContent"></div>&ndash;&gt;-->
                    </div>
                    <!--</el-form-item>-->
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script >
    import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import axios from "../../utils/axios";
    import { getNoticeById } from "../../utils/api";
    export default {
        data() {
            return {
                updateDateOne:{},
                noticename:"",
                editor:null,//编辑器实例
                addDate:"",
                noticeDateId:"",
                noticeDate:{},

                rules4: {
                    noticeName:[{ required: true, message: "必填", trigger: "blur" }],
                    noticeIntro:[{ required: true, message: "必填", trigger: "blur" }],
                    // noticeContent: [{ required: true, message: "必填", trigger: "blur" }],
                    releaseTime: [{ required: true, message: "必填", trigger: "blur" }],
                    // createPerson: [{ required: true, message: "必填", trigger: "blur" }],
                },

            };
        },
        mounted() {
            // location.reload();
            // this.initCKEditor()
        },
        created() {
            this.noticeDateId=this.$route.query.obj.id;
            getNoticeById({ id:this.noticeDateId }).then((res) => {
                console.log(res);
                this.updateDateOne = res.data;
                this.initCKEditor();
                // alert(this.updateDate.noticeName+"zzz");
                // let update =JSON.stringify(this.updateDate);

            });
            // this.sessionStorage.clear();
            // this.initCKEditor();
        },

        methods: {
            //修改公告信息
            editNoticeDialog() {
                // this.$refs.ruleForm2.validate((valid) => {
                    // if (valid) {
                this.updateDateOne.noticeContent=this.editor.getData();
                        axios({
                            method: "PUT",
                            url: "/notice/updateNotice",
                            data: this.updateDateOne,
                        }).then((res) => {
                            if (res.code == 200) {
                                this.$message.success("修改成功");
                                // this.getUserList(this.pageNum);
                                this.$router.push('notice-manage')
                            } else {
                                console.log(res);
                                this.$message.error(res.message);
                            }
                        });
                    // }
                //     else {
                //         this.$message.error("内容不完整");
                //     }
                // });
            },
            //ckeditor
            initCKEditor() {

                CKEditor.create(document.querySelector('#editor'), {
                    ckfinder: {
                        uploadUrl: '/admin/Upload/uploadUrl'
                        //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
                    }
                }).then(editor => {
                    const toolbarContainer = document.querySelector('#toolbar-container');
                    toolbarContainer.appendChild(editor.ui.view.toolbar.element);
                    this.editor = editor //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作
                    // alert(this.updateDateOne.noticeContent);
                    this.editor.setData(this.updateDateOne.noticeContent);
                }).catch(error => {
                    console.error(error);
                });
            },

            edituserDialog(){
                // this.setData();
                alert(this.editor.getData());
                this.d=this.editor.getData();
            },

            sa(){
                // let accountInfo = JSON.parse(this.$route.query.accountInfo);
                // alert(accountInfo+"bjk");
                // this.noticeDateId=this.$route.query.obj.id;
                // alert(this.noticeDateId);

            }


        },



    }
</script>

<!--<style scoped>-->
<style>
    h5{
        font-size: 2rem;
    }
    .browBox {
        width: 100%;
        height: 200px;
        background: #e6e6e6;
        position: absolute;
        z-index: 100;
        bottom: 0px;
        overflow: scroll;
    }
    .browBox ul {
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
    }
    .browBox ul li {
        cursor: pointer;
        width: 10%;
        font-size: 26px;
        list-style: none;
        text-align: center;
    }
    .submit-btn {
        margin: 0 15px 10px 0;
        float: right;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }



    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card-1 {
        min-height:600px;
        width: 750px;
    }



</style>